<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 宠物视频控制台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fontawesome.min.css') }}">
    <script src="{{ url_for('static', filename='js/tailwind.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B35',
                        secondary: '#FFB800'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 100vh;
            background-color: #F8F9FA;
        }
        .glass-effect {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>
<body class="bg-gray-50">
    <nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-gray-200">
        <div class="max-w-[1440px] mx-auto px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-8">
                <a href="/" class="text-2xl font-['Pacifico'] text-primary">logo</a>
            </div>
        </div>
    </nav>

    <main class="min-h-screen flex items-center justify-center pt-16">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-2xl shadow-lg p-8">
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">创建账户</h1>
                    <p class="text-gray-600">加入宠物视频控制台，开启智能宠物生活</p>
                </div>

                <div id="message-container" class="mb-4 hidden">
                    <div id="message-content" class="p-4 rounded-lg"></div>
                </div>

                <form id="register-form" class="space-y-6">
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                        <input type="text" id="username" name="username" required
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                               placeholder="请输入用户名">
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                        <input type="password" id="password" name="password" required
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                               placeholder="请输入密码">
                    </div>
                    <div>
                        <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
                        <input type="password" id="confirm_password" name="confirm_password" required
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                               placeholder="请再次输入密码">
                    </div>
                    <button type="submit" id="register-btn"
                            class="w-full bg-primary text-white font-medium py-3 rounded-lg hover:bg-primary/90 transition-colors">
                        注册
                    </button>
                </form>

                <div class="mt-6 text-center">
                    <p class="text-gray-600">
                        已有账户？
                        <a href="/login" class="text-primary hover:text-primary/80 font-medium">
                            立即登录
                        </a>
                    </p>
                </div>

                <div class="mt-8 text-center">
                    <a href="/" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-arrow-left mr-2"></i>
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 初始化认证管理器
        const auth = new JWTAuth();
        
        // 密码确认验证
        document.getElementById('confirm_password').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const confirmPassword = this.value;
            if (password !== confirmPassword) {
                this.setCustomValidity('密码不匹配');
            } else {
                this.setCustomValidity('');
            }
        });
        
        // 注册表单处理
        document.getElementById('register-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm_password').value;
            const registerBtn = document.getElementById('register-btn');
            const messageContainer = document.getElementById('message-container');
            const messageContent = document.getElementById('message-content');
            
            // 验证密码匹配
            if (password !== confirmPassword) {
                messageContainer.classList.remove('hidden');
                messageContent.className = 'p-4 rounded-lg bg-red-100 text-red-700';
                messageContent.textContent = '密码不匹配';
                return;
            }
            
            // 显示加载状态
            registerBtn.disabled = true;
            registerBtn.textContent = '注册中...';
            messageContainer.classList.add('hidden');
            
            try {
                const result = await auth.register(username, password);
                
                if (result.success) {
                    // 显示成功消息
                    messageContainer.classList.remove('hidden');
                    messageContent.className = 'p-4 rounded-lg bg-green-100 text-green-700';
                    messageContent.textContent = '注册成功！正在跳转到登录页面...';
                    
                    // 延迟跳转到登录页面
                    setTimeout(() => {
                        window.location.href = '/login';
                    }, 2000);
                } else {
                    // 显示错误消息
                    messageContainer.classList.remove('hidden');
                    messageContent.className = 'p-4 rounded-lg bg-red-100 text-red-700';
                    messageContent.textContent = result.error || '注册失败';
                }
            } catch (error) {
                // 显示错误消息
                messageContainer.classList.remove('hidden');
                messageContent.className = 'p-4 rounded-lg bg-red-100 text-red-700';
                messageContent.textContent = '网络错误，请重试';
            } finally {
                // 恢复按钮状态
                registerBtn.disabled = false;
                registerBtn.textContent = '注册';
            }
        });
    </script>
</body>
</html> 